<template>
  <common-dialog dialog-title="批量添加模型属性" :visible.sync="visible"
                 :before-close="handleBeforeClose" v-draggable
                  width="80%" custom-class="add-batch-table-data-dialog">
    <template #body>
      <div class="add-batch-table-data-container" id="add-batch-table-data-container">
        <common-border-table-with-page ref="tableData"
                                       :tableData="tableData"
                                       v-loading="loading"
                                       :table-title="tableTitle"
                                       :filterable="true"
                                       :filter-info="filterInfo"
                                       @search-data="searchData"
                                       @clear-data="searchData"
                                       type="selection"
                                       :current-page.sync="currentPage"
                                       :total="total"
                                       :showRowOption="false"
                                       :page-size.sync="pageSize"
                                       @size-change="handleSizeChange"
                                       @current-page-change="handleCurrentPageChange"
                                       @selection-change="selectionChange"
                                       @row-click="rowClick">
          <template #tableToolbar>
            <div class="table-toolbar">
              <div class="fl">
                <el-button type="danger" icon="el-icon-minus" plain size="small" @click="deleteAttrs">删除</el-button>
              </div>
            </div>
          </template>
          <template #icon="scope">
            <i :class="scope.row.icon" v-if="scope.row.iconType === 'element-ui' && scope.row.icon"></i>
          </template>
        </common-border-table-with-page>
      </div>
    </template>
    <template #footer>
      <el-button type="primary" size="small" @click="submit">确定</el-button>
      <el-button type="info"  size="small" @click="closeDialog">取消</el-button>
    </template>
  </common-dialog>
</template>

<script>

import CommonDialog from '@/components/common/CommonDialog'
import FormMixins from '@/components/mixins/form/FormMixins'
import CommonBorderTableWithPage from '@/components/common/CommonBorderTableWithPage'
import PaginationTableDataMixins from '@/components/mixins/table/PaginationTableDataMixins'
import {filterInfo, tableTitle} from '@/js/model/addBatchAttrsTableConfig'
import {getAddBatchAttrs, deleteCopyAttrs} from '@/js/api/model/modelAttrCopy'

export default {
  name: 'AddBatchAttrs',
  components: {
    CommonDialog,
    CommonBorderTableWithPage
  },
  mixins: [PaginationTableDataMixins, FormMixins],
  data(){
    return {
      selections: []
    }
  },
  methods: {
    async getAddBatchAttrs(condition){
      this.loading = true
      const response = await getAddBatchAttrs(this.currentPage, this.pageSize,
        condition || this.$refs.tableData.getFilterData())
      if (response.errorMsg){
        this.$tips(response.errorMsg, 'error')
      } else {
        const page = response.data
        this.tableData = page.datas
        this.total = page.totalCount
      }
      this.loading = false
    },
    searchData(condition){
      this.currentPage = 1
      this.getAddBatchAttrs(condition)
    },
    handleSizeChange(val){
      this.pageSize = val
      const pageCount = Math.ceil(this.total / this.pageSize)
      if (this.currentPage <= pageCount){
        this.getAddBatchAttrs()
      }
    },
    handleCurrentPageChange(val){
      this.currentPage = val
      this.getAddBatchAttrs()
    },
    deleteAttrs(){
      if (this.selections.length <= 0) {
        this.$tips('请选择要删除的数据！', 'error')
        return
      }
      this.$myConfirm('是否确定删除选中的数据？', async() => {
        const mask = this.$appLoading('数据删除中，请稍后。。。', document.querySelector('#add-batch-table-data-container'))
        const ids = []
        this.selections.forEach(value => { ids.push(value.id) })
        const response = await deleteCopyAttrs(ids)
        if (response.errorMsg){
          this.$tips(response.errorMsg, 'error')
        } else {
          await this.getAddBatchAttrs()
        }
        mask.close()
      })
    },
    selectionChange(selections){
      this.selections = selections
    },
    rowClick(row) {
      const elTable = this.getElTable()
      elTable.clearSelection()
      elTable.toggleRowSelection(row, true)
    },
    submit(){
      if (this.selections.length <= 0) {
        this.$tips('请选择要添加的数据！', 'error')
        return
      }
      this.$emit('addBatchAttrs', this.selections)
      this.closeDialog()
    }
  },
  created(){
    this.initData(filterInfo, tableTitle)
  },
  mounted(){
    this.$nextTick(() => { this.getAddBatchAttrs() })
  }
}
</script>

<style lang="less">
  .add-batch-table-data-dialog {
    .calcHeight(40px);
    overflow-y: hidden !important;

    .el-dialog__body {
      .calcHeight(106px);
      padding-bottom: 0;
      padding-top: 0;
      .add-batch-table-data-container{
        height: 100%;
      }
    }
    .el-dialog__footer{
      text-align: center;
    }
  }
</style>
